<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Backbone Test Page</title>
<script type="text/javascript" src="./js/lib/jquery/1.8.3/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/lib/underscore/underscore.js"></script>
<script type="text/javascript" src="./js/lib/backbone/1.0.0/backbone.js"></script>

<script type="text/javascript">


	/************************直接创建对象************************/
	var model = new Backbone.Model();
	var view = new Backbone.View();	
	var models = new Backbone.Collection();
	// 用set赋值
	model.set("name", "hello");
	console.log(model.get("name"));

	// 在创建的时候赋值
	var model_1 = new Backbone.Model({"name": "hello"});
	var model_2 = new Backbone.Model({"name": "hi"});
	models.add(model_1);
	models.add(model_2);
	console.log(models, JSON.stringify(models));




	/*************************给构造函数添加实例方法和静态方法************************/
	// Backbone.Model.extend(properties, [classProperties]) 
	var M = Backbone.Model.extend({
		aaa: function() {   //实例方法
			console.log("aaa");
		},
		defaults: {   // 默认的数据值
			name: "cgg"
		}
	}, {
		bbb: function() {   //静态方法
			console.log("bbb");
		}
	});
	var model_3 = new M;
	model_3.aaa();
	M.bbb();
	console.log(model_3.get("name"));
	// console.log(M.get("name"));  error




	/**********************继承*************************/
	var M = Backbone.Model.extend({
		e: function() {
			console.log("extend~!")
		}
	});
	var ChildM = M.extend();
	var model = new ChildM;
	model.e();




	/***********************自定义事件*************************/
	var M = Backbone.Model.extend({
		defaults: {
			name: "kathyxxu",
			sex: "f"
		},
		initialize: function() {
			this.on("change", function() {
				console.log("something changed~!");
			});
			this.on("change:sex", function() {
				console.log("sex changed~!");
			});
			this.on("change:name", function() {
				console.log("name changed~!");
			});
		}
	});
	var model = new M;
	model.set("name", "xxxxx");
	model.set("sex", "female");
	// name changed~!
	// something changed~!
	// sex changed~!
	// something changed~!
	console.log(model)




	/*********************** 模型与视图（视图混杂在js中） *************************/
	/*
	object.listenTo(other, event, callback) 
	Tell an object to listen to a particular event on an other object. 
	The advantage of using this form, instead of other.on(event, callback), 
	is that listenTo allows the object to keep track of the events, 
	and they can be removed all at once later on.

	view.listenTo(model, 'change', view.render);
	*/
	// $(function() {
	// 	var M = Backbone.Model.extend({
	// 		defaults: {
	// 			name: 'blabla'
	// 		}
	// 	});

	// 	var V = Backbone.View.extend({
	// 		initialize: function() {
	// 			this.listenTo(this.model, 'change', this.show);
	// 		},
	// 		show: function(model) {
	// 			$("body").append("<div>" + model.get("name") + "</div>");
	// 		}
	// 	});

	// 	var m = new M;
	// 	var v = new V({model: m});
	// 	window.setTimeout(function() {
	// 		m.set("name", "xxxx");
	// 	}, 2000);
	// });


	/*********************** 模型与视图（分离） *************************/
	$(function() {
		var M = Backbone.Model.extend({
			defaults: {
				name: 'blabla'
			}
		});

		var V = Backbone.View.extend({
			initialize: function() {
				this.listenTo(this.model, 'change', this.render);
			},
			render: function(model) {
				// $("body").append("<div>" + model.get("name") + "</div>");
				$("body").append( this.template(this.model.toJSON()) );
			},
			template: _.template( $("#template").html() )
		});

		var m = new M;
		var v = new V({model: m});
		window.setTimeout(function() {
			m.set("name", "HELLO");
		}, 1000);
	});

</script>
</head>
<body>

<script type="text/template" id="template">
	<% for (var i=0; i<5; i++){ %>
	<div><%= name %></div>
	<% } %>
</script>

</body>
</html>